<template>
  <div class="fd-main-box">

    <div class="fd-logo">
      <div class="fd-middle-content">
        <i class="fd-icon-logo"></i> 叮~大雪
        <div class="fd-right-menu" @click="systemClick(interfaceToll)">开发工具</div>
      </div>
    </div>
    <div class="fd-main-content">
      <div class="fd-middle-content">
        <ul class="fd-system-list">
          <li class="fd-system-item" v-for="(system, index) in systemList" :key="index + 'sys'">
            <div class="fd-img-box" @click="systemClick(system)">
              <img :src="system.imgSrc" alt="系统图片" width="100%" height="100%" />
              <p>{{ system.name }}</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "areaDistribution",
  data() {
    return {
      interfaceToll: {
        url: "/interfaceToll"
      },
      systemList: [
        {
          name: "新冠疫情地图",
          url: "/areaDistribution",
          imgSrc: "/static/image/systemImg/area.jpg"
        }, {
          name: "大数据分析系统",
          url: "/index/appStatistics",
          imgSrc: "/static/image/systemImg/app.jpg"
        }
      ]
    };
  },
  methods: {
    /** 单击系统跳转事件
     * @params {Object} system 系统信息
    */
    systemClick(system) {
      const routeUrl = this.$router.resolve({
        path: system.url
      });
      window.open(routeUrl.href, "_blank");
    }
  }
};
</script>
<style lang="less" scoped>
.fd-main-box {
  width: 100%;
  height: 100%;
  background: #fff;
  position: relative;
  padding-top: 60px;

  .fd-logo {
    position: absolute;
    width: 100%;
    height: 60px;
    line-height: 60px;
    top: 0;
    left: 0;
    border-bottom: 1px solid rgb(241, 241, 241);
    font-size: 18px;
    text-align: left;

    .fd-icon-logo {
      display: inline-block;
      width: 40px;
      height: 40px;
      background: url("@{imgUrl}/common/logo.png") center no-repeat;
      background-size: 100% auto;
      margin-top: 8px;
      vertical-align: top;
    }
  }

  .fd-middle-content {
    width: 1440px;
    margin: 0 auto;

  }

  .fd-main-content {
    width: 100%;
    height: 100%;
    position: relative;
    padding: 20px;
  }
}

.fd-system-list {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;

  .fd-system-item {
    width: 25%;
    flex: 0 0 1;
    height: 200px;
    padding: 10px;

    .fd-img-box {
      border: 1px solid #e7e7e7;
      border-radius: 4px;
      box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
      cursor: pointer;
      transition: all ease-in-out 0.2s;

      &:hover {
        opacity: 0.8;
        transform: scale(1.05);
      }
    }

    img {
      display: inline-block;
      width: 100%;
      height: calc(100% - 20px);
    }

    p {
      margin-top: 2px;
      margin-bottom: 4px;
      font-size: 14px;
      cursor: pointer;

      &:hover {
        color: @primary-color;
      }
    }
  }
}

.fd-right-menu {
  float: right;
  font-size: 14px;
  cursor: pointer;
  padding-left: 25px;
  background: url("@{imgUrl}/common/codepen.png") left center no-repeat;
  background-size: 22px;

  &:hover {
    color: @primary-color;
    background: url("@{imgUrl}/common/codepen1.png") left center no-repeat;
    background-size: 22px;
  }
}
</style>
